<template>
    <div class="home wos-flex">
        <!-- 菜单组件 -->
        <menuList :collapsed="collapsed"></menuList>

        <div ref="page" class="wos-flex-auto">
            <nav class="wos-flex wos-between wos-col-center">
                <div id="menuCtrl">
                    <a-icon type="menu-fold" class="wos-hand" @click="toggleCollapsed"/>
                </div>
                <div>
                    <a-spin v-show="LOADING"/>
                </div>
                <div id="menuIcon" class="wos-align-right">
                    <a-dropdown :trigger="['click']" placement="bottomRight">
                        <a-icon type="setting" class="wos-hand" theme="filled"/>
                        <a-menu slot="overlay">
                            <a-menu-item key="0">
                                <a href="http://www.alipay.com/" class="wos-align-right">全局设置</a>
                            </a-menu-item>
                            <a-menu-item key="1">
                                <a href="http://www.taobao.com/" class="wos-align-right">修改登录密码</a>
                            </a-menu-item>
                            <a-menu-divider/>
                            <a-menu-item key="3" class="wos-align-right">退出系统</a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </div>
            </nav>
            <main>
                <!--tabs-->
                <div class="navigation">
                    <a-breadcrumb>
                        <a-breadcrumb-item>数据面板</a-breadcrumb-item>
                        <a-breadcrumb-item><a href="">系统管理</a></a-breadcrumb-item>
                        <a-breadcrumb-item>数据字典</a-breadcrumb-item>
                    </a-breadcrumb>
                </div>

                <!--main-->
                <div class="router-view">
                    <router-view></router-view>
                </div>
            </main>
        </div>
    </div>
</template>

<script>
    import menuList from '../components/MenuListTest/MenuList'

    export default {
        components:{
            menuList
        },
        name: 'Home',
        data(){
            return {
                collapsed:false // 菜单展开状态
            }
        },
        methods:{
            toggleCollapsed() {
                this.collapsed = !this.collapsed
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../assets/css/rule.less";

    main {
        .navigation {
            padding: 10px 20px;
        }
    }

    nav {
        padding: 10px 20px;
        border-bottom: 1px solid @gray;

        #menuCtrl {
            font-size: 1.5rem;
            color: @gray;
        }

        #menuCtrl:hover {
            color: @dark-blue;
        }

        #menuIcon {
            font-size: 1.5rem;
            color: @blue;
        }

        z-index: 99;
    }
</style>
